{extend name="base" /}
{block name="css"}
    <link rel="stylesheet" href="{__CSS__}/css/home.css?v={:rand_number()}"/>
{/block}
{block name="body"}
<!--网页内容 start-->
<!-- 正文开始 -->
<div class="layui-fluid">
<script type="text/javascript">
  window.onload = function() {  
    
      if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
        var width = '90%';
        
    }else{
        var width = '400px';
    };
     <?php if(empty($sign)): ?>
    layer.confirm('友情提醒，今日还未签到！签到的好处包括激励参与、建立信任、获取奖励和跟进历程，可以增强个人参与性、加强团队合作和转化责任心为行动力。', {
          title: '提示',
          time: 5000, //5s后自动关闭
          area: width,
          btn: ['火速签到', '残忍拒绝'],
          icon: 0,
          closeBtn: 2,
       success: function(layero){   
          var btn = layero.find('.layui-layer-btn');
          btn.find('.layui-layer-btn0').attr({ 
            href: '/signin/signin'
          });
        }
        })
        <?php else: ?>
        layer.msg('今日已签到',{time:1000,icon:1});//2秒后自动关闭
        setTimeout(function delayedExecution() {
        layer.msg('记得明日继续签到哦',{time:2000,icon: 1});//2秒后自动关闭
        }, 3000);
        <?php endif; ?>
  };
</script>
<blockquote class="layui-elem-quote">
    <legend><i style="color:<?php echo $string;?>;">上次时间：{$userInfo.prev_time|date='Y-m-d H:i:s'}&nbsp;&nbsp;本次登录时间：{$userInfo.login_time|date='Y-m-d H:i:s'}&nbsp;&nbsp;<span id="test"></span></i></legend>
</blockquote>

  <hr class="layui-bg-green">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
    <!--轮播在cms.base.js里-->
    <div class="layui-carousel" id="banner">
      <div carousel-item>
        
            {foreach $banner as $vo}

                <div style="background-image: url('{$vo.image}'); background-position: center;">
            <div class="layui-container">  
                <div class="pro-con pull-left"><!--pull-right>
                    <h1 class="layui-anim layui-anim-up">
                        响应式         
                        cms.base.js
                    </h1-->
                    <div class="layui-elem-quote child">
                       <blockquote>
                   {:html_entity_decode($vo.desc)}
                 </blockquote> 
                    </div>
                    <!--a href="{$vo.url}" class="layui-btn">
                        查看演示
                    </a-->
                </div>
            </div>
        </div>
        {/foreach}
      </div>
    </div>
    </div>
    {if(empty(ishone()))}  
   <div class="layui-col-md3">
       <div class="grid-demo"><img src="<?php echo seo('image');?>" height="140" width="100%"></div>
    </div>
  {/if}
  </div>
  <hr class="layui-bg-green">
    <!-- 快捷方式 -->
    <div id="consoleLink" class="layui-row layui-col-space15">
        <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs6">
            <div class="console-link-block ajax-link" href="{:url('user/profile')}" tiptext="确认访问会员等级" ew-title="会员等级">
                <div class="console-link-block-num">{$userInfo.level}</div>
                <div class="console-link-block-text">会员等级</div>
                <img class="console-link-block-icon" src="{__IMG__}/homepic4.png">
            </div>
        </div>
        <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs6">
            <div class="console-link-block ajax-link" href="{:url('user/profile')}" tiptext="确认访问会员积分" ew-title="会员积分">
                <div class="console-link-block-num">{$userInfo.score}</div>
                <div class="console-link-block-text">会员积分</div>
                <img class="console-link-block-icon" src="{__IMG__}/homepic1.png">
            </div>
        </div>
        <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs6">
            <div class="console-link-block ajax-link" href="{:url('signin/signin')}" tiptext="确认访问签到" ew-title="签到天数">
                <div class="console-link-block-num">{$userInfo.money}</div>
                <div class="console-link-block-text">{$sign?'己签到':'未签到'}</div>
                <img class="console-link-block-icon" src="{__IMG__}/homepic5.png">
            </div>
        </div>
       
        <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs6">
            <div class="console-link-block ajax-link" href="{:url('user/profile')}" tiptext="确认访问登录天数" ew-title="最大登录天数">
                <img class="console-link-block-icon" src="{__IMG__}/homepic3.png">
                <div class="console-link-block-num">{$userInfo.maxsuccessions}</div>
                <div class="console-link-block-text">最大登录天数</div>
            </div>
        </div>
    </div>
   <!-- 统计图表 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">日统计</div>
                <div class="layui-card-body">
                    <div style="height: 300px;position: relative;">
                        <div id="tjDivDay" style="height: 100%;"></div>
                        <span id="btnShowDetail"
                              style="color: #1AB4E8;font-size: 18px;position: absolute;bottom: 75px;left: 50%;transform: translateX(-50%);cursor: pointer;">
                            签到明细<i class="layui-icon layui-icon-right" style="font-size: 16px;"></i>
                        </span>
                    </div>
                    <div class="layui-row text-center">
                        <div class="layui-col-xs6">
                            <div id="tv1Num1" style="color: #28a6d6;font-size: 22px;">{$count-$signin}</div>
                            <div style="font-size: 18px;padding: 10px 0 15px 0;">未签到</div>
                        </div>
                        <div class="layui-col-xs6">
                            <div id="tv1Num2" style="color: #28a6d6;font-size: 22px;">{$signin}</div>
                            <div style="font-size: 18px;padding: 10px 0 15px 0;">已签到</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">周统计</div>
                <div class="layui-card-body">
                    <div id="tjDivWeek" style="height: 373px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">月统计</div>
                <div class="layui-card-body">
                    <div id="tjDivMonth" style="height: 373px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
  <script type="text/javascript" src="{__JS__}/echarts/echarts.min.js?v={:rand_number()}"></script>
  <script type="text/javascript" src="{__JS__}/echarts/echartsTheme.js?v={:rand_number()}"></script>
<script language="JavaScript">
    layui.use(function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;
        var util = layui.util;//倒计时
         //示例倒计时
        var serverTime = new Date().getTime(); //假设为当前服务器时间
        var endTime = <?php echo floor(($userInfo['userToken']['expire_time'])); ?>*1000 //假设为结束日期
        // 倒计时60s  serverTime+60000
        util.countdown(endTime, serverTime, function(date, serverTime, timer){
            //console.log(date)
           //console.log(serverTime/1000)
            //console.log(timer)
            var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
            layui.$('#test').html('距离结束还有：'+ str);

            if (serverTime==endTime){
                layer.open({
                    title: '<div style="color:#44ff00">完成</div>'
                    ,content: '倒计时结束'
                });
            }


        });
        // 渲染日签到图表
        var myCharts1 = echarts.init(document.getElementById('tjDivDay'), myEchartsTheme);
        var options1 = {
            title: {
                show: true,
                x: 'center',
                y: '33%',
                text: '签到人数/应到人数',
                textStyle: {
                    fontSize: 20,
                    color: '#333'
                },
                subtextStyle: {
                    fontSize: 50,
                    lineHeight: 100,
                    color: '#28a6d6'
                }
            },
            color: ['#18B4E7', '#ddd'],
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    radius: ['75%', '80%'],
                    label: {
                        normal: {
                            show: false
                        }
                    }
                }
            ]
        };
        myCharts1.setOption(options1);
         // 搜索
        var res1 = JSON.parse('<?php echo html_entity_decode($datajson_day); ?>');
        var mSignList = res1.signList;
        myCharts1.setOption({
            title: {
                subtext: res1.signNum + "/" + res1.allNum
            },
            series: [
                {
                    data: [
                        {name: "已签到", value: res1.signNum},
                        {name: "未签到", value: res1.allNum - res1.signNum}
                    ]
                }
            ]
        });
        // 签到明细
        $('#btnShowDetail').click(function () {
           layer.open({
                type: 1,
                area: '500px',
                offset: '80px',
                title: '签到明细',
                content: '<table id="signDetailTable" lay-filter="signDetailTable"></table>',
                success: function (layero, dIndex) {
                    // 渲染表格
                    table.render({
                        elem: '#signDetailTable',
                        data: mSignList,
                        page: false,
                        height: 280,
                        cellMinWidth: 100,
                        lineStyle: 'height: 100px;',//头像高度
                        cols: [[
                            {type: 'numbers', title: '#'},
                            {field: 'avatar', width:'80', title: '会员头像', 
                              templet: function (d) {
                            var url = d.avatar;
                        return '<img src="' + url + '" class="tdImg" tb-img/>';
                        }},
                            {field: 'name', title: '会员姓名',align: 'center'},
                            {field: 'types', title: '签到类型',align: 'center',},
                            {field: 'time', width:'160', title: '签到时间'},
                        ]],
                        done: function () {
                            $(layero).find('.layui-table-view').css('margin', '0');
                        }
                    });
                    // end
                }
            });
        });

        // ------------------------------------------------------------------------
        // 渲染周签到图表
        var myCharts2 = echarts.init(document.getElementById('tjDivWeek'), myEchartsTheme);
        var options2 = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    lineStyle: {
                        color: '#E0E0E0'
                    }
                }
            },
            color: ['#10B4E8', '#FFA800'],
            legend: {
                orient: 'vertical',
                right: '0px',
                top: '25px',
                data: ['已签到', '未签到']
            },
            grid: {
                top: '120px',
                left: '35px',
                right: '55px'
            },
            xAxis: {
                name: '星期',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A'
                }
            },
            yAxis: {
                name: '人数',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A'
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                minInterval: 1
            },
            series: [
                {
                    name: '已签到',
                    type: 'bar',
                    stack: "one",
                    barMaxWidth: '30px',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: function (params) {
                                if (params.value > 0) {
                                    return params.value;
                                } else {
                                    return '';
                                }
                            }
                        }
                    }
                },
                {
                    name: '未签到',
                    type: 'bar',
                    stack: "one",
                    barMaxWidth: '30px',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    }
                }
            ]
        };
        myCharts2.setOption(options2);
        // 获取数据
        var res2 = JSON.parse('<?php echo html_entity_decode($datajson_week); ?>');
        var dateList = [], signNums = [], unSignNums = [];
        for (var i = 0; i < res2.data.length; i++) {
            var one = res2.data[i];
            dateList.push(one.date);
            signNums.push(one.signNum);
            unSignNums.push(one.unSignNum);
        }
        myCharts2.setOption({
            series: [{data: signNums}, {data: unSignNums}]
        });

        // -------------------------------------------------------------------------
        // 渲染月签到图表
        var myCharts3 = echarts.init(document.getElementById('tjDivMonth'), myEchartsTheme);
        var options3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#E0E0E0'
                    }
                },
                formatter: '{b}号<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#10B4E8;"></span>{a0}: {c0}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FFA800;"></span>{a1}: {c1}'
            },
            color: ['#10B4E8', '#FFA800'],
            legend: {
                orient: 'vertical',
                right: '0px',
                top: '25px',
                data: ['已签到', '未签到']
            },
            grid: {
                top: '120px',
                left: '35px',
                right: '55px'
            },
            xAxis: {
                name: '日期',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A',
                    interval: function (index, value) {
                        if (index == 0 || ((index + 1) % 5 == 0)) {
                            return true;
                        }
                        return false;
                    }
                }
            },
            yAxis: {
                name: '人数',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A'
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                minInterval: 1
            },
            series: [
                {
                    name: '已签到',
                    type: 'line',
                    smooth: false,
                    data: []
                },
                {
                    name: '未签到',
                    type: 'line',
                    smooth: false,
                    data: []
                }
            ]
        };
        myCharts3.setOption(options3);
        // 获取数据
        var res3 = JSON.parse('{$datajson_month|raw|html_entity_decode}');
        var dateList = [], signNums = [], unSignNums = [];
        for (var i = 0; i < res3.data.length; i++) {
            var one = res3.data[i];
            dateList.push(i + 1);
            signNums.push(one.signNum);
            unSignNums.push(one.unSignNum);
        }
        myCharts3.setOption({
            xAxis: {data: dateList},
            series: [{data: signNums}, {data: unSignNums}]
        });
        // -------------------------------------------------------------------------

        // 窗口大小改变事件
        window.onresize = function () {
            myCharts1.resize();
            myCharts2.resize();
            myCharts3.resize();
        };

    });

</script>
{/block}